<template>
	<view v-if="show" class="sums" style="">
		<u-status-bar bgColor="#06121e" style="background-color: #06121e;"></u-status-bar>
		<!-- <image class="bgimg" src="../../static/tabsIcon/clubtop.jpg" mode="" style=""></image> -->
		<view class="tab">
			<view @click="xxFn = 1" :class="xxFn == 1 ? 'fapiao' : ''">团队</view>
			<view @click="xxFn = 2" :class="xxFn == 2 ? 'fapiao' : ''">个人</view>
		</view>
		<view class="addnew" @click="jump()">
			<image src="../../static/tabsIcon/addnew.png" mode="" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="mains">
			<xx v-if="xxFn == 1"></xx>
			<xx1 v-if="xxFn == 2"></xx1>
		</view>
		
	</view>
</template>

<script>
	import xx from './clubbers.vue';
	import xx1 from './personal.vue';
	export default {
		data() {
			return {
				LinkType: 'switchTab',
				xxFn: 1,
				show: true,
				modeType: false,
			};
		},
		onShow() {
			this.show = false
			setTimeout(() => {
				this.show = true
			}, 50)
		},
		components: {
			xx,
			xx1
		},
		methods: {
			jump() {
				uni.navigateTo({
					url: './qrcode',
				});
			}
		}
	};
</script>
<style>
	page {
		/* background-color: #eee; */
	}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background-color: transparent;
	}

	.sums {
		height: 100vh;
		// height: 400upx;
		background-color: rgba(254, 140, 128, 1);
		background-image: url(../../static/tabsIcon/invitebg.png);
		// background-size: 40upx 80upx;
		background-size: 100% 50%;
		background-repeat: no-repeat;

	}

	.bgimg {
		position: absolute;
		// float: left;
		// z-index: -1;
		width: 100vw;
		height: 40vh;
		// -webkit-filter: blur(10rpx);
		// -moz-filter: blur(10rpx);
		// -o-filter: blur(10rpx);
		// -ms-filter: blur(10rpx);
		// filter: blur(10rpx);
	}

	.butt {
		margin: 20upx 15upx 0 0;
		border-radius: 20px;
		// background-color: #cd2a29;
		height: 70rpx;
		font-size: 28rpx;
		color: white;
		color: #ffffff;
	}

	.tab {
		position: fixed;
		top: 0;
		padding-top: var(--status-bar-height);
		z-index: 11;
		width: 100%;
		display: flex;
		text-align: center;
		background-color: rgba(254, 140, 128, 1);

		view {
			width: 50%;
			padding: 20upx 0;
			position: relative;
			color: #FFFFFF;
			transition: all 0.3s ease-in-out;

			&:active {
				background-color: #FFF;
			}
		}

		.fapiao {
			color: #FFF;
			font-weight: 700;

			&:after {
				content: '';
				position: absolute;
				height: 10upx;
				border-radius: 15upx;
				width: 20%;
				background-color: #FFF;
				bottom: 0;
				left: 50%;
				transform: translate(-50%);
				border-radius: 40upx;
			}
		}

	}

	.mains {
		position: relative;
		padding-top: 15%;
		// height: calc(100% - 23rpx - 10vh - 101rpx );
		// height: calc(100% - 70upx);
		height: calc(100% - 5%);
		overflow: auto;
		top: 10upx;
	}

	/deep/ .u-status-bar {
		background-color: #06121e;
	}

	.addnew {
		position: fixed;
		z-index: 100;
		// background-color: #007AFF;
		top: 80vh;
		right: 30upx;
		width: 150upx;
		height: 150upx;
	}
</style>
